<!--
  例子:

  请输入后 - 点击 切换类型
  ============================

  问题描述：
  当输入后，点击切换按钮，，输入的内容还存在，，但假如需求 要求清空 呢？

  ----------------------------
  这是 vue 底层的问题
  (性能考虑的) vue 有 虚拟dom，为了防止消耗渲染，会把重复的，进行复用

  解决
  添加 key

 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <span v-if="isUser">
       <label for="username">用户账号</label>
       <input type="text" id='username' placeholder="用户账户" :value.props="inputName" @keyup='saveName($event)' key='1'>
     </span>

     <span v-else>
       <label for="email">用户邮箱</label>
       <input type="text" id='email' placeholder="用户邮箱" :value="inputEmail" @keyup='saveEmail($event)' key='2'>
     </span>

     <button @click='isUser = !isUser'>切换类型</button>
   </div>

   <script src='/vue.js'></script>
   <script>
     new Vue({
       el: '#app',
       data: {
         isUser: true,
         inputName: '',
         inputEmail: '',
       },
       methods: {
         saveName: function(event) {
           this.inputName = getTargetOfValue(event);
           console.log('this.inputName=', this.inputName);
         },
         saveEmail: function(event) {
           this.inputEmail = getTargetOfValue(event);
           console.log('this.inputEmail=', this.inputEmail);
         }
       }
     })

     function getTargetOfValue(event={}) {
       let target = event.target || {};
       return target.value || '';
     }
   </script>
 </body>
 </html>